<template>
  <div>
      <!-- bag太多慢慢调 -->
      <!-- 我是标题 -->
    <p>基本表格</p>
    <!-- 表格区域 -->

    <div>
      <el-table :data="formlistx" border style="width: 100%">
          <!-- 名字 -->
        <el-table-column prop="name" label="用户名"> </el-table-column>
        <!-- 头像 -->
        <el-table-column prop="img" label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.img" alt="" />
          </template>
        </el-table-column>
        <!-- 评分 -->
        <el-table-column prop="score" label="评分" width="150">
            
          <template slot-scope="scope">
            <el-rate v-model="scope.row.score"></el-rate>
          </template>
        </el-table-column>
         <el-table-column prop="content" label="内容" > </el-table-column>
        <!-- 类型 -->
        <el-table-column prop="scoreType" label="评分类型"> </el-table-column>
        <!-- 时间 -->
        <el-table-column prop="arrivalTime" label="送达时间"> </el-table-column>
        <el-table-column prop="recommend" label="推荐"> </el-table-column>
        <el-table-column prop="scoreTime" label="评价时间"> </el-table-column>
      </el-table>
    </div>
    <p class="p1"></p>
    <!-- 分页器 -->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="upper"
        @next-click="lower"
        :current-page="page"
        :page-sizes="[3, 5, 7, 10]"
        :page-size="stripx"
        layout="total, sizes, prev, pager, next, jumper"
        :total="formlist.length"
        :small="true"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formlist: [],//数据列表
     formlistx: [], //被截取的数据，当前页的数据
      page: 1,//当前页
      stripx: 3,//几条数据
    };
  },

  methods: {
    getformlist() {
      //获取列表数据
      this.$axios.get("/json/fopm.json").then((rem) => {
        this.formlist = rem.data.list;//模板绑定数据
        this.page--;//减减
        this.lower();//分配数据
      });
    },
    upper(f, x) {//上一页
      let a = (this.page - 1) * this.stripx;//设置初始截取下标，
      let b = a + this.stripx;
      this.formlistx = this.formlist.slice(a, b);//截取并绑定
      this.page--;
    },
    lower(f, x) {//下一页
      let a = (this.page - 1) * this.stripx;

      a < 0 ? (a = 0) : "";
      let b = a + this.stripx;
      this.formlistx = this.formlist.slice(0, b);
      this.page++;
      this.page < 1 ? (this.page = 1) : "";
    },
    handleSizeChange(a) {//改变每页条数
      this.stripx = a;
      this.page--;
      this.lower();
    },
    handleCurrentChange(a) {//通过输入页实现跳转页面
       this.page=a-1
       this.lower()
    },
  },
  mounted() {//调用获取数据
    this.getformlist();
  },
};
</script>
<style scoped>
.cell img {
  width: 100%;
  height: 50%;
}
.p1 {
  height: 9%;
}
</style>